<template>
  <div class="Menu">
    <el-menu :default-active="activeIndex" background-color="rgb(4,31,65)" text-color="#fff">
      <div v-for="(item,index) in matchrole.slice(0,3)" :key="index">
        <router-link :to="item.path">
          <el-menu-item :index="item.index+''">
            <i
              :class="[item.name=='用户管理'?'el-icon-s-custom':item.name=='通知公告管理'?'el-icon-phone':'el-icon-user']"
            ></i>
            <span slot="title" style="font-size:14px">{{item.name}}</span>
          </el-menu-item>
        </router-link>
      </div>
      <el-submenu index="4" v-if="matchrole.length>3">
        <template slot="title">
          <i class="el-icon-s-comment"></i> 短信服务管理
        </template>
        <el-menu-item
          :index="2-4+'-'+index"
          v-for="(item,index) in matchrole.slice(3)"
          :key="index"
        >
          <router-link :to="item.path">{{item.name}}</router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      activeIndex: "1",
      matchrole: []
    };
  },
  watch: {
    $route() {
      console.log(this.$route);
      console.log(
        (this.activeIndex =
          this.$route.name == "User"
            ? "1"
            : this.$route.name == "Notic"
            ? "2"
            : this.$route.name == 'Technology'?"3":"4")
      );
    }
  },
  computed: {},
  methods: {
    getDetailUser() {
      this.$ajax
        .post("/index.php/system/hqlrole/detailsUser", {
          id: 4 //JSON.parse(sessionStorage.getItem("session")).user.id
        })
        .then(res => {
          res.data.msg.role.forEach((item, index) => {
            let menu_name = item.menu_name;
            console.log(menu_name);
            if (menu_name == "系统管理") {
              item.children.forEach((items, indexs) => {
                if (items.children[0].user_type) {
                  let name = items.children_menu_name;
                  this.matchrole.push({
                    index: indexs + 1,
                    name: name,
                    path:
                      name == "用户管理"
                        ? "/User"
                        : name == "通知公告管理"
                        ? "/Notic"
                        : "/Technology"
                  });
                }
              });
            }
          });
          // console.log("匹配系统管理权限", this.matchrole);
          this.matchrole.push(
            {
              name: "群发管理",
              path: "/Message/index",
              index: 4
            },
            {
              name: "分组管理",
              path: "/Message/group",
              index: 5
            }
          );
          this.$store.dispatch("actions_set_matchrole", this.matchrole);
          console.log("store matchrole", this.$store.state.matchrole);
          // console.log(this.matchrole === this.$store.dispatch('actions_get_matchrole'))
          this.$router.push({ path: this.matchrole[0].path });
        })
        .catch(err => {
          this.$confirm("系统运行异常，请联系管理员", "提示", {
            confirmButtonText: "确定",
            type: "warning"
          });
        });
    }
  },
  created() {
    this.getDetailUser();
  },
  mounted() {
    console.log(this.$route);
  }
};
</script>
<style lang="stylus" scoped>
.Menu {
  flex: 0 0 13%;
  background: rgb(4, 31, 65);
}

.el-menu-item {
  font-size: 16px;
  transition: all 0.2s linear;
  height: 36px;
  line-height: 36px;
}

.el-menu-item:hover {
  background: rgb(4, 31, 65) !important;
}

.el-menu {
  border: none;

  li {
    font-size: 14px;
    border-left: 2px solid rgb(36, 179, 179);
    border-right: none;
  }
}

a {
  padding: 0 10px;
  font-size: 14px;
  color: #FFFFFF;
}

/deep/.el-submenu__title:hover {
  background: rgb(4, 31, 65) !important;
}

/deep/.el-submenu li {
  border-left: none;
}
</style>